<template>
  <div class="main-page">
    <div>hello world</div>
    <visibleEditor v-model="jsonData" :config="configComponents"></visibleEditor>
    <!-- <test-use-model v-model="val"></test-use-model> -->
    <!-- val: {{val}} -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import {visibleEditor} from '@/components/visibleEditor.tsx';
import {configComponents} from '@/components/visibleConfig.tsx'
// import {testUseModel} from '@/components/utils/useModel.tsx';

export default defineComponent({
  name: 'App',
  components: {
    visibleEditor,
    // testUseModel
  },
  data() {
    return {
      val: '',
      jsonData: {
        container: {
          width: 800,
          height: 500
        },
        blocks: [
          {left: 100, top:100},
          {left:200, top:200}
        ]
      },
      configComponents
    }
  }
});
</script>

<style lang="scss">
html,body{
  margin:0;
  padding:0;
  .main-page {
    
  }
}
</style>
